<template>
  <div class="table-box-content">
    <Table-Com
      ref="table"
      :columns="columns"
      :data-source="tableData"
      :options="options"
      :handleSelectionChange="tabSelect"
      :pagination="pagination"
      :query="query"
    >
    </Table-Com>
  </div>
</template>

<script lang="ts" setup>
import { onBeforeMount, ref } from "vue";
const table = ref();
const columns = [
  {
    prop: "date",
    label: "Date",
    children: [
      {
        prop: "year",
        label: "Year",
        width: "100",
      },
      {
        prop: "month",
        label: "Month",
        width: "100",
      },
      {
        prop: "day",
        label: "Day",
        width: "100",
      },
    ],
  },
  {
    prop: "name",
    label: "Name",
    width: "180",
  },
  {
    prop: "address",
    label: "Address",
  },
];
var tableData = ref([]);
const options = {
  height: "100%",
  Index: true,
  mutiSelect: true,
};
const pagination = ref({
  total: 0,
  pageIndex: 1,
  pageSize: 15,
});
const TestTable = [
  {
    id: "1",
    year: "2016",
    month: "05",
    day: "03",
    name: "Lili",
    address: "No. 012, Grove St, Los Angeles",
  },
  {
    id: "2",
    year: "2016",
    month: "05",
    day: "02",
    name: "Tom",
    address: "No. 105, Grove St, Los Angeles",
  },
  {
    id: "3",
    year: "2016",
    month: "05",
    day: "04",
    name: "Jerry",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    id: "4",
    year: "2016",
    month: "05",
    day: "01",
    name: "Cat",
    address: "No. 279, Grove St, Los Angeles",
  },
  {
    id: "5",
    year: "2016",
    month: "06",
    day: "03",
    name: "Lili",
    address: "No. 012, Grove St, Los Angeles",
  },
];
const handleClick = (item) => {
  console.log(item);
};
const tabSelect = (data) => {
  console.log(data[0]?.name);
};
const query = () => {
  tableData.value = [];
  if (pagination.value.pageSize == 15) {
    if (pagination.value.pageIndex == 1) {
      tableData.value = TestTable.slice(0, 15);
    } else {
      tableData.value = TestTable.slice(15, 30);
    }
  } else {
    tableData.value = TestTable;
  }
  pagination.value.total = TestTable.length;
};

onBeforeMount(() => {
  query();
});
</script>
